<template>
    <!-- pages/setCouponInfo/setCouponInfo.wxml -->
    <view class="container" :style="isIpx ? 'padding-bottom:168rpx' : 'padding-bottom:120rpx'">
        <view class="form">
            <view class="line">
                <label>优惠券名称：</label>
                <view class="right">
                    <input v-model="couponName" type="text" placeholder="必填" />
                </view>
            </view>
            <view class="line">
                <label>优惠券类型：</label>
                <view class="right">
                    <view class="city">
                        <picker @change="bindTypeChange" range-key="name" :range="types">
                            <view class="picker">
                                <input type="text" disabled placeholder="请选择类型" placeholder-class="plh" :value="types[type - 1].name" />
                                <view class="iconfont icon-xuanzex"></view>
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
            <!-- 单选门店 -->
            <view class="line">
                <label>适用门店：</label>
                <view class="right">
                    <view class="tags">
                        <view class="city store">
                            <picker @change="bindStoreChange" range-key="name" :range="stores">
                                <view class="picker">
                                    <input type="text" disabled placeholder="请选择" placeholder-class="plh" :value="stores[storeIndex].name" />
                                    <view class="iconfont icon-xuanzex"></view>
                                </view>
                            </picker>
                        </view>
                    </view>
                </view>
            </view>
            <view class="line">
                <label>包间限制：</label>
                <view class="right">
                    <view class="city">
                        <picker @change="bindDoorChange" :value="doorIndex" range-key="name" :range="rooms">
                            <view class="picker">
                                <input type="text" disabled placeholder="请选择类型" placeholder-class="plh" :value="rooms[doorIndex].name" />
                                <view class="iconfont icon-xuanzex"></view>
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="line">
                <label>使用门槛：</label>
                <!-- 抵扣券 -->
                <view class="right" v-if="type == 1 || type == 3">
                    <view class="city">
                        <picker @change="bindRuleChange" :value="ruleIndex" :range="rules">
                            <view class="picker">
                                <input type="text" disabled placeholder="请选择" placeholder-class="plh" :value="rules[ruleIndex]" />
                                <view class="iconfont icon-xuanzex"></view>
                            </view>
                        </picker>
                    </view>
                </view>
                <!-- 满减券 -->
                <view class="right" v-if="type == 2">
                    <view class="step">
                        <van-stepper v-model="minUsePrice" min="0" max="999" @change="minUseChange" />
                        元
                    </view>
                </view>
            </view>
            <view class="line">
                <label>抵扣额度：</label>
                <!-- 抵扣券 -->
                <view class="right" v-if="type == 1 || type == 3">
                    <view class="city">
                        <picker @change="bindLimitChange" :value="limitIndex" :range="limits">
                            <view class="picker">
                                <input type="text" disabled placeholder="请选择" placeholder-class="plh" :value="limits[limitIndex]" />
                                <view class="iconfont icon-xuanzex"></view>
                            </view>
                        </picker>
                    </view>
                </view>
                <!-- 满减券 -->
                <view class="right" v-if="type == 2">
                    <view class="step">
                        <van-stepper v-model="price" min="0" max="999" @change="priceChange" />
                        元
                    </view>
                </view>
            </view>
            <view class="line">
                <label>过期时间：</label>
                <view class="right">
                    <picker style="width: 100%" mode="date" :value="expriceTime" @change="selectDateSecondChange">
                        <input type="text" disabled placeholder="请选择时间" placeholder-class="plh" v-model="expriceTime" />
                    </picker>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view :class="'submit border-primary ' + (isIpx ? 'fix-iphonex-button' : '')">
            <button hover-class="button-click" class="color-primary cancel" @tap="cancel">取消</button>
            <button hover-class="button-click" class="bg-primary" @tap="submit">保存</button>
        </view>
    </view>
</template>

<script>
// pages/setCouponInfo/setCouponInfo.js
const app = getApp();
var http = require('../../../utils/http');
var util1 = require('../../../utils/util.js');
export default {
    data() {
        return {
            ruleIndex: '',
            rules: [
                '1小时',
                '2小时',
                '3小时',
                '4小时',
                '5小时',
                '6小时',
                '7小时',
                '8小时',
                '9小时',
                '10小时',
                '11小时',
                '12小时',
                '13小时',
                '14小时',
                '15小时',
                '16小时',
                '17小时',
                '18小时',
                '19小时',
                '20小时',
                '21小时',
                '22小时',
                '23小时',
                '24小时'
            ],
            limitIndex: '',
            limits: [
                '0.5小时',
                '1小时',
                '1.5小时',
                '2小时',
                '2.5小时',
                '3小时',
                '3.5小时',
                '4小时',
                '4.5小时',
                '5小时',
                '5.5小时',
                '6小时',
                '6.7小时',
                '7小时',
                '7.5小时',
                '8小时',
                '8.5小时',
                '9小时',
                '9.5小时',
                '10小时',
                '10.5小时',
                '11小时',
                '11.5小时',
                '12小时'
            ],
            couponId: '',
            couponName: '',
            type: '',

            types: [
                {
                    id: 1,
                    name: '抵扣券'
                },
                {
                    id: 2,
                    name: '满减券'
                },
                {
                    id: 3,
                    name: '加时券'
                }
            ],

            storeId: '',

            //门店
            tags: [],

            stores: [],
            roomType: '',

            rooms: [
                {
                    id: null,
                    name: '不限制'
                },
                {
                    id: 1,
                    name: '小包'
                },
                {
                    id: 2,
                    name: '中包'
                },
                {
                    id: 3,
                    name: '大包'
                },
                {
                    id: 4,
                    name: '豪包'
                },
                {
                    id: 5,
                    name: '商务包'
                }
            ],

            minUsePrice: '',
            price: '',
            expriceTime: '',
            isIpx: app.globalData.isIpx ? true : false,
            storeIndex: '',
            doorIndex: '',
            name: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getXiaLaListAdmin();
        if (options.couponId) {
            this.setData({
                couponId: Number(options.couponId)
            });
            this.getData();
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        //管理员获取门店下拉列表数据
        getXiaLaListAdmin: function (e) {
            var that = this;
            //if (app.globalData.isLogin)
            {
                http.request(
                    '/member/store/getStoreList',
                    '1',
                    'get',
                    {},
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('下拉门店数据===');
                        console.info(info);
                        if (info.code == 0) {
                            let stores = [];
                            info.data.map((it) => {
                                stores.push({
                                    name: it.key,
                                    id: it.value
                                });
                            });
                            that.setData({
                                stores: stores
                            });
                        } else {
                            uni.showModal({
                                content: '请求服务异常，请稍后重试',
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 获取详情
        getData: function () {
            let that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/manager/getCouponDetail/' + that.couponId,
                    '1',
                    'get',
                    {
                        couponId: that.couponId
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            let storeIndex = '';
                            that.stores.map((it, index) => {
                                if (it.id === info.data.storeId) {
                                    storeIndex = index;
                                }
                            });
                            let doorIndex = '';
                            that.rooms.map((it, index) => {
                                if (it.id === info.data.roomType) {
                                    doorIndex = index;
                                }
                            });
                            let ruleIndex = '';
                            that.rules.map((it, index) => {
                                if (it.match(/\d+(.\d+)?/g)[0] == info.data.minUsePrice) {
                                    ruleIndex = index;
                                }
                            });
                            let limitIndex = '';
                            that.limits.map((it, index) => {
                                if (it.match(/\d+(.\d+)?/g)[0] == info.data.price) {
                                    limitIndex = index;
                                }
                            });
                            that.setData({
                                couponId: info.data.couponId,
                                couponName: info.data.couponName,
                                type: info.data.type,
                                storeId: info.data.storeId,
                                storeIndex: storeIndex,
                                roomType: info.data.roomType,
                                doorIndex: doorIndex,
                                minUsePrice: info.data.minUsePrice,
                                ruleIndex: ruleIndex,
                                price: info.data.price,
                                limitIndex: limitIndex,
                                expriceTime: info.data.expriceTime
                            });
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 选择优惠券类型
        bindTypeChange: function (e) {
            //console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                type: this.types[e.detail.value].id
            });
        },

        // 单选选门店
        bindStoreChange: function (e) {
            //console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                storeId: this.stores[e.detail.value].id,
                storeIndex: e.detail.value
            });
        },

        // 选择包间限制
        bindDoorChange: function (e) {
            //console.log('picker发送选择改变，携带值为', e.detail.value)
            let roomType = this.rooms[e.detail.value].id;
            this.setData({
                doorIndex: e.detail.value,
                roomType: roomType
            });
        },

        // 选择门槛时间段
        bindRuleChange: function (e) {
            //console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                ruleIndex: e.detail.value,
                minUsePrice: this.rules[e.detail.value].match(/\d+(.\d+)?/g)[0]
            });
        },

        // 抵扣额度
        bindLimitChange: function (e) {
            //console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                limitIndex: e.detail.value,
                price: this.limits[e.detail.value].match(/\d+(.\d+)?/g)[0]
            });
        },

        // 时分秒的事件方法
        selectDateSecondChange(e) {
            this.setData({
                expriceTime: e.detail.value
            });
        },

        // 使用门槛步进器
        minUseChange: function (event) {
            this.setData({
                minUsePrice: event.detail
            });
        },

        // 抵扣额度步进器
        priceChange: function (event) {
            this.setData({
                price: event.detail
            });
        },

        // 取消
        cancel: function () {
            uni.navigateBack();
        },

        // 保存
        submit: function () {
            if (this.couponName && this.type && this.storeId && this.expriceTime) {
                let that = this;
                if (app.globalData.isLogin) {
                    http.request(
                        '/member/manager/saveCouponDetail',
                        '1',
                        'post',
                        {
                            couponId: that.couponId,
                            couponName: that.couponName,
                            expriceTime: that.expriceTime,
                            minUsePrice: that.minUsePrice,
                            price: that.price,
                            storeId: that.storeId,
                            roomType: that.roomType,
                            type: that.type
                        },
                        app.globalData.userDatatoken.accessToken,
                        '',
                        function success(info) {
                            console.info('返回111===');
                            console.info(info);
                            if (info.code == 0) {
                                uni.showToast({
                                    title: '设置成功',
                                    icon: 'success'
                                });
                                setTimeout(() => {
                                    uni.navigateBack();
                                }, 1000);
                            } else {
                                uni.showModal({
                                    content: info.msg,
                                    showCancel: false
                                });
                            }
                        },
                        function fail(info) {}
                    );
                }
            } else {
                uni.showToast({
                    title: '请填写完整',
                    icon: 'none'
                });
            }
        }
    }
};
</script>
<style>
@import './setCouponInfo.css';
</style>
